<template>
    <div v-loading="loading" class="board-container">
        <!-- 筛选器 -->
        <filter-data @filterSubmit="filterSubmit" />
        <!-- 全局数据分析 -->
        <basics-card>
            <h5 class="h5">
                全局数据分析
                <el-popover placement="top-start" width="280" trigger="hover" content="全局数据分析">
                    <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                </el-popover>
            </h5>
            <h6 class="h6">l 持有规模</h6>
            <!-- 持有规模 -->
            <board-hold :bgmData="[]" ref="boardHoldChild"/>
            <h6 class="h6">l 运营规模</h6>
            <!-- 运营规模 -->
            <ul class="ul-flex-operation">
                <li class="li-card" style="width: 80px">
                    <h6 class="h6-title"></h6>
                    <h6 class="h6-num h6-special">运营总计</h6>
                    <p class="p-num h6-special">公 开</p>
                    <p class="p-num h6-special">非 公 开</p>
                </li>
                <li v-for="(item, index) in operationData" :key="index" class="li-card">
                    <h6 class="h6-title">{{ item.title }}</h6>
                    <h6 class="h6-num">{{ item.size }}</h6>
                    <p class="p-num">{{ item.open }}</p>
                    <p class="p-num">{{ item.private }}</p>
                </li>
            </ul>
        </basics-card>
        <!-- 收入数据分析 -->
        <basics-card>
            <h5 class="h5">
                收入数据分析
                <el-popover placement="top-start" width="280" trigger="hover" content="收入数据分析" >
                    <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                </el-popover>
            </h5>
            <board-income :bgmData="[]" ref="boardIncomeChild"/>
        </basics-card>

        <!-- 公寓数据分析、商业数据分析 -->
        <el-row :gutter="20">
            <el-col :span="12">
                <basics-card>
                    <h5 class="h5">
                        公寓数据分析
                        <el-popover placement="top-start" width="280" trigger="hover" content="公寓数据分析">
                            <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                        </el-popover>
                    </h5>
                    <house-analyse ref="houseAnalyseChild"/>
                </basics-card>
            </el-col>
            <el-col :span="12">
                <basics-card>
                    <h5 class="h5">
                        商业数据分析
                        <el-popover placement="top-start" width="280" trigger="hover" content="商业数据分析">
                            <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                        </el-popover>
                    </h5>
                    <bussiness-analyse ref="busAnalyseChild" />
                </basics-card>
            </el-col>
        </el-row>
        <!-- 车位数据分析、多种经营数据分析 -->
        <el-row :gutter="20">
            <el-col :span="12">
                <basics-card>
                    <h5 class="h5">
                        车位数据分析
                        <el-popover placement="top-start" width="280" trigger="hover" content="车位数据分析">
                            <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                        </el-popover>
                    </h5>
                    <carport-analyse ref="carPortChild"/>
                </basics-card>
            </el-col>
            <el-col :span="12">
                <basics-card>
                    <h5 class="h5">
                        多种经营数据分析
                        <el-popover placement="top-start" width="280" trigger="hover" content="多种经营数据分析">
                            <i slot="reference" class="el-icon-warning-outline" style="margin-left: 6px"></i>
                        </el-popover>
                    </h5>
                    <manage-analyse ref="manageChild"/>
                </basics-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import FilterData from '../filter-data.vue';
import BasicsCard from '@/components/Widget/basics-card.vue';
import BoardHold from '../board/board-hold.vue';
import BoardIncome from '../board/board-income.vue';
import HouseAnalyse from '../board/house-analyse.vue';
import BussinessAnalyse from '../board/bussiness-analyse.vue';
import CarportAnalyse from '../board/carport-analyse.vue';
import ManageAnalyse from '../board/manage-analyse.vue';
import { getStoreBldgData } from '@/api/DashBoardApi';
export default {
    components: { FilterData, BasicsCard, BoardHold, BoardIncome, HouseAnalyse, BussinessAnalyse, CarportAnalyse, ManageAnalyse },
    data() {
        return {
            loading: true,
            operationData: [
                {
                    title: '门店数量(个)',
                    size: '0',
                    open: '0',
                    private: '0'
                },
                {
                    title: '城市数量(个)',
                    size: '0',
                    open: '',
                    private: ''
                },
                {
                    title: '公寓管理规模(间)',
                    size: '0',
                    open: '0',
                    private: '0'
                },
                {
                    title: '公寓总建面(㎡)',
                    size: '0',
                    open: '0',
                    private: '0'
                },
                {
                    title: '商业总建面(㎡)',
                    size: '0',
                    open: '0',
                    private: '0'
                },
                {
                    title: '管理车位规模(个)',
                    size: '0',
                    open: '0',
                    private: '0'
                },
                {
                    title: '多种经营(个)',
                    size: '0',
                    open: '0',
                    private: '0'
                }
            ]
        };
    },
    mounted() {
        this.loadData({});
    },
    methods: {
        loadData(parms) {
            this.loading = true;
            getStoreBldgData(parms)
                .then((res) => {
                    if (res && res.obj) {
                        this.operationData[0].size = res.obj.storeTotalNum;
                        this.operationData[0].open =res.obj.storePubNum;
                        this.operationData[0].private =res.obj.storePriNum;

                        this.operationData[1].size = res.obj.cityTotalNum;

                        this.operationData[2].size = res.obj.aptTotalNum;
                        this.operationData[2].open = res.obj.aptPubNum;
                        this.operationData[2].private = res.obj.aptPriNum;

                        this.operationData[3].size = res.obj.aptTotalArea;
                        this.operationData[3].open = res.obj.aptPubArea;
                        this.operationData[3].private = res.obj.aptPriArea;

                        this.operationData[4].size = res.obj.busTotalArea;
                        this.operationData[4].open = res.obj.busPubArea;
                        this.operationData[4].private = res.obj.busPriArea;


                        this.operationData[5].size = res.obj.pklotTotalNums;
                        this.operationData[5].open = res.obj.pklotPubNums;
                        this.operationData[5].private = res.obj.pklotPriNums;

                        this.operationData[6].size = res.obj.mgtModels;
                        this.operationData[6].open = res.obj.mgtPubModels;
                        this.operationData[6].private = res.obj.mgtPriModels;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        filterSubmit(parms) {
            this.loadData(parms);
            this.$refs.boardHoldChild.cygmFilterSer(parms);

            this.$refs.boardIncomeChild.getBiData(parms);
            this.$refs.boardIncomeChild.getBiData2(parms);
            this.$refs.boardIncomeChild.getBiData3(parms);

            this.$refs.houseAnalyseChild.getHouseData1(parms);
            this.$refs.houseAnalyseChild.getHouseData2(parms);

            this.$refs.busAnalyseChild.getBusData(parms);
            
            this.$refs.carPortChild.getCarPortData(parms);

            this.$refs.manageChild.getManageData(parms);

        }
    }
};
</script>

<style lang="scss" scoped>
.board-container {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;
    .h5 {
        font-size: 16px;
        font-weight: 800;
        color: #1d2129;
    }
    .h6 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
    }
    .ul-flex-operation {
        display: flex;
        flex-flow: row nowrap;
        .li-card {
            width: 200px;
            height: 134px;
            background: #fff;
            padding: 20px 0 0 8px;
            .h6-title {
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                font-weight: 500;
                color: #1d252f;
            }
            .h6-num {
                height: 26px;
                line-height: 26px;
                font-size: 16px;
                font-weight: bold;
                color: #1d252f;
                margin-top: 4px;
            }
            .p-num {
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: #4e5969;
                margin-top: 6px;
            }
            .h6-special {
                font-size: 13px !important;
                font-weight: bold !important;
                color: #1d2129 !important;
            }
        }
    }
}
</style>
